<!-- 课程支付-暂时不用 -->
<template>
	<view class="study-container">
		<view class="user-card-container">
			<!-- 主卡片 -->
			<view class="user-card">
				<!-- 用户信息 -->
				<!-- 课程名称 -->
		<!-- 		<view class="course-list">
					<view class="course-item" v-for="(course, index) in courseList" :key="index">
						<view class="course-left">
							<u-image :src="course.cover" width="220rpx" height="240rpx" mode="aspectFill" radius="4"></u-image>
						</view>
						<view class="course-right">
							<text class="course-name">{{ course.name }}</text>
							<text class="course-level">专业等级：{{ course.level }}</text>
							<text class="course-teacher">讲师：{{ course.teacher }}</text>
							<view class="course-footer">
								<text class="course-count">{{ course.lessonCount }}节</text>
								<text class="course-count">|</text>
								<text class="course-price">¥{{ course.price }}</text>
							</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<!-- 第二部分 -->
		<view class="floating-stats">
			<view class="course-tabs">
				<u-tabs :list="tabs" :current="currentTab" @change="changeTab" activeColor="#2979ff" inactiveColor="#606266"
					barWidth="80"  item-width="50%" bg-color="#f0f0f0"></u-tabs>
			</view>
			<!-- 内容 -->
			<view v-if="currentTab === 0" class="teacher-section">
				<!-- <view class="section-title">讲师介绍</view> -->
				<scroll-view class="teacher-scroll" scroll-x="true" show-scrollbar="false">
					<view class="teacher-list">
						<view class="teacher-card" v-for="(teacher, index) in teachers" :key="index">
							<!-- 讲师评分 -->
							<!-- 						<view class="teacher-rating" v-if="teacher.rating">
								<u-rate :value="teacher.rating" disabled size="20" active-color="#ff9900"></u-rate>
								<text class="rating-value">{{ teacher.rating }}</text>
							</view> -->
							<!-- 图片左 -->
							<view class="course-left">
								<u-image :src="teachers.cover" width="120rpx" height="160rpx" mode="aspectFill" radius="4"></u-image>
							</view>
							<!-- 讲师基本信息 -->
							<view class="teacher-detail">
								<text class="teacher-name">{{ teacher.name }}</text>
								<text class="teacher-info">{{ teacher.title }} | 从业{{ teacher.experience }}年</text>

								<!-- 专业领域 -->
								<view class="skill-tags">
									<text v-for="(skill, skillIndex) in teacher.skills" :key="skillIndex" class="skill-tag">
										{{ skill }}
									</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- 图片 -->
				<!-- 介绍和课程表 -->
				<!-- <view  class="tab-content"> -->
				<!-- 课程介绍 -->
				<view class="teacher-explain">
					<!-- <view class="section-title">介绍</view> -->
					<view class="teacher-content">
						<text class="teacher-text">{{ courseInfo.introduction }}</text>
					</view>
					<view class="teacher-img">
						<u-image v-if="courseInfo.introImage" :src="courseInfo.introImage" width="100%" height="300rpx"
							mode="widthFix" radius="8" class="teacher-image"></u-image>
					</view>
				</view>
				<!-- </view>		 -->
			</view>
			
			<!-- 讲师介绍 -->
				<view class="chapter-container" v-if="currentTab === 1">
					<!-- 进度模块 -->
					<view class="chapter-schedule">
						<u-line-progress :percent="30" :round="true" active-color="#ff9900" class="progress"></u-line-progress>
						<text class="chapter-title">已学30%</text>
					</view>
					<!-- 章节列表 -->
					<view class="chapter-list">
						<!-- 章节1 - 已学完 -->
						<view class="chapter-item completed">
							<view class="chapter-header">
								<text class="chapter-title">章节名称 (5)</text>
								<u-icon name="play-circle-fill" color="#19be6b" size="50"></u-icon>
							</view>
			
							<view class="lesson-item">
								<view class="lesson-info">
									<text class="lesson-name">第一课 基础入门</text>
									<text class="lesson-status">已学完</text>
								</view>
								<text class="lesson-duration">30分钟22秒</text>
							</view>
						</view>
			
						<!-- 章节2 - 可播放 -->
						<view class="chapter-item">
							<view class="chapter-header">
								<text class="chapter-title">章节名称 (5)</text>
								<u-icon name="play-circle-fill" color="#2979ff" size="50"></u-icon>
							</view>
			
							<view class="lesson-item">
								<view class="lesson-info">
									<text class="lesson-name">第二课 进阶知识</text>
								</view>
								<text class="lesson-duration">30分钟22秒</text>
							</view>
						</view>
			
						<!-- 章节3 - 学习中 -->
						<view class="chapter-item">
							<view class="chapter-header">
								<text class="chapter-title">章节名称 (5)</text>
								<u-icon name="lock-fill" color="#909399" size="50"></u-icon>
							</view>
			
							<view class="lesson-item">
								<view class="lesson-info">
									<text class="lesson-name">第三课 实战演练</text>
									<text class="lesson-status">已学10%</text>
								</view>
								<text class="lesson-duration">30分钟22秒</text>
							</view>
						</view>
			
						<!-- 章节4 - 已锁定 -->
						<view class="chapter-item locked">
							<view class="chapter-header">
								<text class="chapter-title">章节名称 (5)</text>
								<u-icon name="lock-fill" color="#909399" size="50"></u-icon>
							</view>
			
							<view class="lesson-item">
								<view class="lesson-info">
									<text class="lesson-name">第四课 高级技巧</text>
								</view>
								<text class="lesson-duration">30分钟22秒</text>
							</view>
						</view>
					</view>
				</view>
		</view>
		<!-- 底部操作栏 -->
		<view class="action-bar">
			<u-button type="default" shape="circle" @click="buyCourse" :customStyle="customStyle" class="buy-btn">
				客服助理
			</u-button>
			<u-button type="default" shape="circle" @click="buyCourse" :customStyle="customStyle" class="buy-btn">
				分享赚积分
			</u-button>
			<u-button type="default" shape="circle" @click="buyCourse" class="buy-btn">
				购买 ¥{{ courseInfo.price }}
			</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				courseList: [{
					id: 1,
					cover: '/static/course1.jpg',
					name: '前端开发高级课程',
					level: '一级',
					rating: 3.4,
					teacher: '张老师',
					lessonCount: 45,
					price: '80.00',
					category: '前端开发'
				}],
				currentTab: 0,
				tabs: [{
						name: '介绍'
					},
					{
						name: '讲师介绍'
					}
				],
				stats: [{
						value: 24,
						label: '积分'
					},
					{
						value: 15,
						label: '粉丝'
					},
					{
						value: 8,
						label: '关注'
					},
					{
						value: 10,
						label: '消息'
					}
				],
				teachers: [{
						cover: '/static/course1.jpg',
						name: '张老师',
						title: '高级前端工程师',
						experience: 8,
						rating: 3.4,
						skills: ['前端架构', '性能优化', 'Vue.js', 'React.js']
					},
					{
						cover: '/static/course1.jpg',
						name: '李老师',
						title: '全栈工程师',
						experience: 5,
						rating: 3.4,
						skills: ['Node.js', 'TypeScript', '前端工程化']
					},
					{
						cover: '/static/course1.jpg',
						name: '王老师',
						title: 'UI设计师',
						experience: 6,
						rating: 4.2,
						skills: ['UI设计', '交互设计', '用户体验']
					}
				],
				courseInfo: {
					introduction: '图文介绍文章图文介绍文章图文介绍文章图文介绍文章图文介绍图文介绍文章图文介绍文章图文介绍文章图文介绍文章图文',
					introImage: '/static/course-intro.jpg',
					price: '10.8'
				},
				customStyle: {
					backgroundColor: "#D5D5D5"
				},
				// 讲师介绍
				// 实际开发中这里应该是从API获取的数据
				chapters: [
				  {
				    id: 1,
				    name: "章节名称 (5)",
				    status: "completed",
				    lessons: [
				      {
				        name: "第一课 基础入门",
				        duration: "30分钟22秒",
				        status: "completed"
				      }
				    ]
				  },
				  {
				    id: 2,
				    name: "章节名称 (5)",
				    status: "unlocked",
				    lessons: [
				      {
				        name: "第二课 进阶知识",
				        duration: "30分钟22秒",
				        status: "unlocked"
				      }
				    ]
				  },
				  {
				    id: 3,
				    name: "章节名称 (5)",
				    status: "in-progress",
				    lessons: [
				      {
				        name: "第三课 实战演练",
				        duration: "30分钟22秒",
				        status: "in-progress",
				        progress: 10
				      }
				    ]
				  },
				  {
				    id: 4,
				    name: "章节名称 (5)",
				    status: "locked",
				    lessons: [
				      {
				        name: "第四课 高级技巧",
				        duration: "30分钟22秒",
				        status: "locked"
				      }
				    ]
				  }
				]
			}
		},
		methods: {
			changeTab(index) {
				this.currentTab = index;
			},	
		}
	}
</script>

<style lang="scss" scoped>
	.study-container {
		// width: 100%;
		// height: 100%;
		background-color: #6c6c6c;
	}

	/* 外层容器 */
	.user-card-container {
		position: relative;
		padding-bottom: 60rpx;
		/* 为浮动统计留出空间 */
		background-color: #6c6c6c;
		height: 235px;
		top: 10px;

	}

	/* 主卡片样式 */
	.user-card {
		// background: #6c6c6c;
		// border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		color: #ffffff;

	}

	// 课程名称
	.course-list {
		border-radius: 8rpx;
		overflow: hidden;
	}

	.course-item {
		display: flex;
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;


		&:last-child {
			border-bottom: none;
		}
	}

	.course-left {
		margin-right: 20rpx;
	}

	.course-right {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.course-name {
		font-size: 30rpx;
		font-weight: bold;
		color: #ffffff;
		margin-bottom: 10rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.course-level,
	.course-teacher {
		font-size: 24rpx;
		color: #ffffff;
		margin-bottom: 8rpx;
	}

	.course-rating {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;

		.rating-value {
			font-size: 24rpx;
			color: #ffffff;
			margin-left: 10rpx;
		}
	}

	.course-footer {
		display: flex;
		// justify-content: space-between;
		margin-top: 10rpx;

		.course-count {
			font-size: 24rpx;
			color: #ffffff;
			margin-right: 10px;
		}

		.course-price {
			font-size: 28rpx;
			color: #ffffff;
			font-weight: bold;
		}
	}

	/* 浮动统计行样式,内容 */
	.floating-stats {
		position: absolute;
		top: 180px;
		left: 0rpx;
		right: 0rpx;
		// height: 80%;
		background: #f0f0f0;
		border-radius: 40rpx 40rpx 0 0;

		// display: flex;
		// justify-content: space-between;
		// align-items: center;
		// padding: 0 20rpx;
		// box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		// z-index: 2;			
		.course-tabs {
			position: static;
			margin: 10px;
			left: 0rpx;
			right: 0rpx;
			border-radius: 40rpx 40rpx 0 0;
			background-color: #f0f0f0;
		}

		// 讲师内容
		.teacher-section {
			padding: 10rpx;
			background-color: #ffffff;
			border-radius: 12rpx;
			margin: 5px;

			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 20rpx;
			}
		}

		.teacher-scroll {
			width: 100%;
			white-space: nowrap;
			// margin-top: 20px;

			/* 隐藏滚动条 */
			::-webkit-scrollbar {
				display: none;
				width: 0;
				height: 0;
				color: transparent;
			}
		}

		.teacher-list {
			display: inline-flex;
			gap: 20rpx;
		}

		.teacher-card {
			display: inline-flex;
			flex-direction: row;
			// 每一个卡片的宽度
			width: 280px;
			padding: 20rpx;
			background-color: #ffffff;
			border-radius: 12rpx;
			white-space: normal;

			.teacher-rating {
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;

				.rating-value {
					font-size: 24rpx;
					color: #ff9900;
					margin-left: 8rpx;
				}
			}

			.teacher-detail {
				// display: none;
				display: inline-flex;
				flex-direction: column;

				.teacher-name {
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 6rpx;
				}

				.teacher-info {
					font-size: 24rpx;
					color: #666;
					margin-bottom: 15rpx;
				}

				.skill-tags {
					display: flex;
					flex-wrap: wrap;
					gap: 8rpx;

					.skill-tag {
						font-size: 20rpx;
						color: #2979ff;
						background-color: #e6f0ff;
						padding: 4rpx 12rpx;
						border-radius: 20rpx;
						display: inline-block;
					}
				}
			}
		}


	}

	// 图片内容
	// .tab-content {
	// 	padding: 20rpx;
	// 	border-radius: 30rpx;
	// 	position: static;
	// 	// background-color: #2979ff;
	// }

	.teacher-explain {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;

		.teacher-content {
			font-size: 32rpx;
			margin-bottom: 10px;
		}


		// .teacher-text {
		// 	font-size: 32rpx;
		// 	margin-bottom: 20rpx;
		// 	padding-bottom: 16rpx;
		// 	border-bottom: 1rpx solid #eee;
		// }

		// .teacher-image {
		// 	margin-top: 50px;
		// }
	}
	
	// 讲师介绍
	.chapter-container {
	  padding: 20rpx;
		height: 800px;
	  background-color: #ffffff;
	}
	
	.chapter-schedule {
		background-color: #ffffff;
		// margin: 5px;
		margin-bottom: 10px;
		height: 50px;
		line-height: 50px;
		border-bottom: 5px solid #f0f0f0;
		
		.progress {
			width: 75%;
			margin: 0 10px;
		}
	}
	
	
	.chapter-list {
	  background-color: #fff;
	  border-radius: 12rpx;
	  overflow: hidden;
	}
	
	.chapter-item {
	  padding: 24rpx;
	  border-bottom: 1rpx solid #eee;
	  
	  &:last-child {
	    border-bottom: none;
	  }
	  
	  &.completed {
	    background-color: #fff;
	    opacity: 0.8;
	  }
	  
	  &.locked {
	    opacity: 0.6;
	    
	    .lesson-name, .lesson-duration {
	      color: #c0c4cc !important;
	    }
	  }
	}
	
	.chapter-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin-bottom: 20rpx;
	  
	  .chapter-title {
	    font-size: 30rpx;
	    font-weight: bold;
	    color: #333;
	  }
	}
	
	.lesson-item {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 16rpx 0;
	  
	  .lesson-info {
	    display: flex;
	    align-items: center;
	    gap: 15rpx;
	    
	    .lesson-name {
	      font-size: 28rpx;
	      color: #333;
	    }
	    
	    .lesson-status {
	      font-size: 24rpx;
	      color: #19be6b;
	    }
	  }
	  
	  .lesson-duration {
	    font-size: 24rpx;
	    color: #909399;
	  }
	}

	// 底部
	.action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
		z-index: 100;

		// .action-left {
		// 	display: flex;
		// 	align-items: center;
		// 	flex: 1;

		// 	.action-item {
		// 		display: flex;
		// 		flex-direction: column;
		// 		align-items: center;
		// 		margin-right: 30rpx;

		// 		.action-text {
		// 			font-size: 22rpx;
		// 			color: #606266;
		// 			margin-top: 6rpx;
		// 		}
		// 	}

		// 	.earn-points {
		// 		.action-text {
		// 			color: #ff9900;
		// 		}
		// 	}
		// }

		.buy-btn {
			width: 200rpx;
			height: 80rpx;
		}
		
	}
</style>